<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>授权管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${ctx}/static/ztree/css/zTreeStyle/metro.css">
	<script src="${ctx}/static/js/messages_bs_zh.js"></script>
    <script type="text/javascript" src="${ctx}/static/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="${ctx}/static/ztree/js/jquery.ztree.all-3.5.min.js"></script>
</head>
<body style="text-align:center">

	<div class="main-content-inner">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">授权管理</li>
			</ul><!-- /.breadcrumb -->
	
		</div>	
		<!-- /section:basics/content.breadcrumbs -->
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					授权管理
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<c:choose>
							<c:when test="${action eq 'create' }">
								新增
							</c:when>
							<c:otherwise>
								修改
							</c:otherwise>
						</c:choose>
					</small>
				</h1>
			</div><!-- /.page-header -->			
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">

							<form id="inputForm" action="${ctx}/rolepermission/${action}" method="post" class="form-horizontal">
								<input type="hidden" name="roleid" id="roleid" value="${role.id}"/>
								<input type="hidden" name="allpermission" id="allpermission"/>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 角色名称: </label>
									<label class="control-label" style="margin-left:15px" for="form-field-1">${role.rolename}</label>
								</div>
							</form>
								<input type="hidden" name="result" id="result" value="${result}"/>
								<input type="hidden" name="checkedlist" id="checkedlist" value="${checkedlist}"/>
								<div class="zTreeDemoBackground left">
							        <ul id="tree" class="ztree"></ul>
							    </div>
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button id="submit_btn" class="btn btn-info" type="button" onclick="getchecked();">
											<i class="ace-icon fa fa-check bigger-110"></i>
											提交
										</button>

										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>
									</div>
								</div>
								
					
						</div><!-- /.span -->
					</div><!-- /.row -->			
				</div>
			</div>
			
		</div><!-- /.page-content -->
	</div>



	<!-- inline scripts related to this page -->

	<script>
		var arr =new Array();
	    var zTree;
	    var demoIframe;
	    
	    function addHoverDom(treeId, treeNode) {
	        var sObj = $("#" + treeNode.tId + "_span");
	        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
	        var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId
	                + "' title='add node' onfocus='this.blur();'></span>";

	        addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
	        addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
	        sObj.after(addStr);
	        var btn = $("#addBtn_"+treeNode.tId);
	        if (btn) btn.bind("click", function(){
	            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	            zTree.addNodes(treeNode, {id:(1000 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
	            return false;
	        });
	    };

	    function removeHoverDom(treeId, treeNode) {
	        $("#addBtn_"+treeNode.tId).unbind().remove();
	        $("#removeBtn_"+treeNode.tId).unbind().remove();
	        $("#editBtn_"+treeNode.tId).unbind().remove();
	    };

	    var setting = {
	    	async:{
	    		enable:true
	    	},
	        check: {
	            enable: true
	        },
	        view: {
// 	            addHoverDom: addHoverDom,
	            removeHoverDom: removeHoverDom,
	            dblClickExpand: false,
	            showLine: true,
	            selectedMulti: false
	        },
	        data: {
	            simpleData: {
	                enable:true,
	                idKey: "id",
	                pIdKey: "pId",
	                rootPId: ""
	            }
	        },
	        callback: {
	            beforeClick: function(treeId, treeNode) {
	                var zTree = $.fn.zTree.getZTreeObj("tree");
	                if (treeNode.isParent) {
	                    zTree.expandNode(treeNode);
	                    return false;
	                } else {
	                    demoIframe.attr("src",treeNode.file + ".html");
	                    return true;
	                }
	            },
	            onAsyncSuccess:zTreeOnAsyncSuccess
	        }
	    };

	    var zNodes ;
	    $(document).ready(function(){
	        var t = $("#tree");
	        zNodes =eval($("#result").val());
	        t = $.fn.zTree.init(t, setting, zNodes);
	        demoIframe = $("#testIframe");
	        demoIframe.bind("load", loadReady);
	        var zTree = $.fn.zTree.getZTreeObj("tree");
	        zTree.selectNode(zTree.getNodeByParam("id", 101));

	    });

	    function loadReady() {
	        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
	                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
	                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
	                h = demoIframe.height() >= maxH ? minH:maxH ;
	        if (h < 530) h = 530;
	        demoIframe.height(h);
	    }
	    

        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
  			alert(111);
           zTree.expandAll(false);   
                            
           var lists=$("#checkedlist").val();
            for(var i=0;i<lists.length;i++){
                  var id=lists[i].permissionid;
                  var node = zTree.getNodeByParam("id",id);
            
                  node.checked=true;//为什么设置了checked=true，可是等树显示的时候节点仍然没有选中
                  alert(node.checked);
                 
            }
        
        }
		
		function getchecked(e,treeId,treeNode){
			var treeObj=$.fn.zTree.getZTreeObj("tree");
			nodes=treeObj.getCheckedNodes(true);
			for(var i=0;i<nodes.length;i++){
				arr.push(nodes[i].id); //给数组添加选中的节点id
			}
			document.getElementById("allpermission").value=arr;
			document.forms[0].submit();
	    }
	</script>
</body>
</html>
